<style scoped>
    .logo-c {
        display: flex;
        align-items: center;
        color: rgba(255,255,255,.8);
        font-size: 18px;
        margin: 20px 0 0 0;
        justify-content: center;
        padding-bottom:16px;
        border-bottom:1px solid rgba(255,255,255,.8);
    }
    .ivu-menu-vertical .ivu-menu-item, .ivu-menu-vertical .ivu-menu-submenu-title{
        padding-top:10px !important;
        padding-bottom:10px !important;
    }
    .ul-c {
        margin-top:15px;
        height: 34px;
        background: #fff;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 0 10px;
        overflow: hidden;
        width: calc(100% - 160px);
    }
    .ul-c li {
        border-radius: 3px;
        cursor: pointer;
        font-size: 12px;
        height: 24px;
        padding: 0 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 3px 5px 2px 3px;
        border: 1px solid #e6e6e6;
    }
    a {
        color: #666;
        transition: none;
    }
    .li-a {
        max-width: 80px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .ul-c .ivu-icon {
        margin-left: 6px;
    }
    .active {
        background: #409eff;
        border: 1px solid #409eff;
    }
    .active a {
        color: #fff;
    }
    .active .ivu-icon {
        color: #fff;
    }

</style>
<template>
    <div class="layout">
        <Sider :style="{position: 'fixed', height: '100vh',left: 0, overflow: 'auto'}">
            <div class="logo-c">
                <span>后台管理系统</span>
            </div>
            <Menu accordion :activeName="names"  theme="dark" :style="{width:'240px;'}" @on-select="clickmenu">
                <!-- 无二级列表 菜单 -->
                <MenuItem v-for="item in datalis2" :key="item.id" :name="item.id.toString()">
                    <Icon type="md-document" />
                    {{item.Name}}
                </MenuItem>
                <div v-for="(item,index) of datalist"  :key="lists[index].id">
                    <Submenu  :name="lists[index].id.toString()" v-if="item.length>0">
                        <template slot="title">
                            <Icon type="ios-filing" />
                            {{lists[index].Name}}
                        </template>
                        <div v-if="item.length>0">
                            <div v-for="item2 in item" :name="item2.a.id.toString()" :key="item2.a.id">
                                <Submenu :name="item2.a.id.toString()" v-if="item2.b.length>0">
                                    <template slot="title">
                                        <Icon type="ios-analytics" />
                                        {{item2.a.Name}}
                                    </template>
                                    <MenuItem  v-for="item3 in item2.b" :key="item3.id" :name="item3.id.toString()">{{item3.Name}}</MenuItem>
                                </Submenu>
                                <MenuItem v-else :name="item2.a.id.toString()" >
                                    <Icon type="ios-analytics" />
                                    {{item2.a.Name}}
                                </MenuItem>
                            </div>
                        </div>
                    </Submenu>
                    <MenuItem v-else :name="lists[index].id.toString()">
                        <Icon type="md-document" />
                        {{lists[index].Name}}
                    </MenuItem>
                </div>
            </Menu>
        </Sider>
        <Layout :style="{marginLeft: '200px'}">
            <Header :style="{background: '#fff', boxShadow: '0 2px 3px 2px rgba(0,0,0,.1)',padding:'0 20px',position:'relative'}">
                <ul class="ul-c" :style="{overflow:'auto',width:'calc(100% - 120px)'}">
                    <li  v-for="(item,index) of topvals" :key="index" @click="tochange(item.id)" :class="{active:names==item.id}">
                        <a class="li-a">{{item.Name}}</a>
                        <Icon size="16" @click.stop="closeTag(index)" type="md-close" />
                    </li>
                </ul>
                <div style="width:120px;position:absolute;right:10px;top:0;cursor:pointer;" @click="lyout"><i class="ivu-icon ivu-icon-ios-exit-outline"></i>  注销登录</div>
            </Header>
            <Content :style="{padding: '0 16px 16px'}">
                <div :style="{margin: '10px 0',position:'relative'}">
                    <Breadcrumb >
                        <BreadcrumbItem v-for="(item,index) of mianbao" :key="index">{{item.Name}}</BreadcrumbItem>
                    </Breadcrumb>
                    <div style="position:absolute;right:0;width:60px;top:-4px;font-size:20px;cursor:pointer;" @click="refresh" title="刷新当前页面"><Icon type="md-refresh" /></div>
                </div>
                
                <Card >
                    <div style="padding-bottom:20px;overflow:auto;height:600px;">
                        <keep-alive>
                            <!-- 首页 -->
                            <Home v-if="names == 0"></Home>   
                            <!-- 添加列表页面 -->
                            <Addlist v-else-if="names == -1&&isRouterAlive" @ee="cc"></Addlist>
                            <Banner v-else-if="names == -2&&isRouterAlive"></Banner>
                            
                        </keep-alive>
                        <News v-if="names!=0&&names!=-1&&names!=-2&&isRouterAlive" :names="names"  :lists="lists" :datalist="datalist"></News>
                    </div>
                </Card>
            </Content>
        </Layout>
    </div>
</template>
<script>
import Home from '../components/home'
import Addlist from '../components/addlist'
import Banner from '../components/banner'
import News from '../components/news'
import TableComponent from '../components/table'
    export default {
        components:{Home,Addlist,Banner,News,TableComponent},
        data () {
            return {
                theme2: 'dark',
                datalist:[],
                datalis2:[
                    {Name:'首页',id:'0'},
                    {Name:'创建类',id:'-1'},
                    {Name:'banner',id:'-2'},
                    {Name:'新闻动态',id:'1'},
                    {Name:'人才培养',id:'2'},
                    {Name:'产业发展',id:'3'},
                    {Name:'产教融合',id:'4'},
                    {Name:'安全科普',id:'5'},
                    {Name:'会议报名',id:'6'},
                    {Name:'项目',id:'14'}
                ],
                lists:[
                    {Name:'中心概况',id:'7'},
                    {Name:'协同单位',id:'8'},
                    {Name:'分支机构',id:'9'},
                    {Name:'研究咨询',id:'10'},
                    {Name:'合作交流',id:'11'},
                    {Name:'科普文化',id:'12'},
                    {Name:'联系我们',id:'13'},
                ],
                topvals:[{Name:'首页',id:'0'}],
                topname:'',
                actname:'',
                names:0,
                mianbao:[{Name:'首页',id:'0'}],
                isRouterAlive:true

            }
        },
        methods: {
            //注销登录
            lyout(){
                this.$axios.get('/admin/layout').then(res=>{
                    if(res.data.ret){
                        this.$router.replace('/iadmin/login')
                    }
                })
            },
            refresh(){
                this.isRouterAlive = false
                this.$nextTick(function () {
                    this.isRouterAlive = true
                })
            },
            clickmenu(name){
                 this.names=name;
                 this.miaobaofn(name)
                  this.isRouterAlive = false
                    this.$nextTick(function () {
                        this.isRouterAlive = true
                    })
            },
            //顶部按钮生成
            topfn(pushitem){
                if(this.topvals.length){
                    var aa =false
                    this.topvals.forEach((item,index)=>{
                        if(item.id == pushitem.id){
                            aa=true
                        }
                    })
                    if(!aa){
                        this.topvals.push(pushitem)
                    }
                }else{
                    this.topvals.push(pushitem)
                }
                
            },
            tochange(id){
                this.names = id;
                this.miaobaofn(id)
                this.refresh()
                
            },
            //关闭顶部导航
            closeTag(index){
                if(this.topvals[index].id ==this.names &&this.topvals.length>1){
                    this.names=this.topvals[index-1].id
                }
                this.topvals.splice(index,1)
                this.miaobaofn(this.names)
            },
            //面包屑
            miaobaofn(name){
                this.mianbao=[];
                //如果id小于13 则说明不是请求出来的
                if(name<=6){
                    this.datalis2.forEach((item,index) => {
                        if(item.id == name){
                            this.mianbao.push(item)
                            this.topfn(item)
                        }
                    });
                }else if(name<=13){
                    this.lists.forEach((item,index) => {
                        if(item.id == name){
                            this.mianbao.push(item)
                            this.topfn(item)
                        }
                    });
                }else{
                    this.datalist.forEach((item,index)=>{
                        item.forEach((item2,index2)=>{
                            if(item2.b.length>0){
                                item2.b.forEach((item3,index3)=>{
                                    if(item3.id == name){
                                        this.mianbao.push(this.lists[index],item2.a,item3)
                                        this.topfn(item3)
                                    }
                                })
                            }else{
                                if(item2.a.id==name){
                                    this.mianbao.push(this.lists[index],item2.a)
                                    this.topfn(item2.a)
                                }
                            }
                        })
                    })
                }
            },
            cc(){
                var that = this;
                that.$axios.post('/admin/addlist/show').then(res=>{
                    if(res.data.ret){
                        that.datalist=res.data.data
                    }
                })
            }
        },
        mounted() {
            var that = this;
            // this.$axios.post('/admin/islogin').then(res=>{
            //     if(res.data.ret){
            //         this.$router.replace('/login')
            //     }
            // })
            that.$axios.post('/admin/addlist/show').then(res=>{
                if(res.data.ret){
                    that.datalist=res.data.data
                }
            })
        },
        watch: {
           
        },
    }
</script>